import * as React from "react";
import { Button, Card, List, SearchBar, Tag } from "antd-mobile";
import { makeStyles } from "@material-ui/styles";
import { StyleRules } from "@material-ui/styles/withStyles";
import moment from "moment";
import { useEffect, useState } from "react";
import { PersonData } from "../data/common";
import { Link } from "react-router-dom";
import service from "../request/Service";

const useStyles = makeStyles<StyleRules<any, "root" | "middle">>({
  root: {
    display: "flex",
    "& div:nth-of-type(1)": {
      flex: 1
    }
  },
  middle: {
    display: "flex",
    margin: "0 0 0 10px",
    flexDirection: "column",
    fontSize: "small",
    color: "#9d9d9d",
    "& .name-sun": {
      fontSize: "large",
      color: "#dd0b1e"
    }
  }
});
/**
 * 描述：
 *  页面中部的展示
 * @author sunshixiong
 * @date 2019/3/13-15:56
 */
const MiddleView = () => {
  const classes = useStyles();
  const [data, setData] = useState<PersonData[]>([]);
  useEffect(() => {
    getData();
  }, []);
  const getData = (params?: any) => {
    service.get("/personInfo", { params }).then(value => {
      if (value.data.content) {
        setData(value.data.content);
      }
    });
  };
  return (
    <div>
      <SearchBar
        placeholder="按姓名查找"
        maxLength={8}
        onSubmit={value => {
          getData({ name: value });
        }}
      />
      <List renderHeader={"月嫂列表"}>
        {data.map((value: PersonData) => {
          return (
            <List.Item key={value.id}>
              <Card>
                <Card.Body>
                  <div className={classes.root}>
                    <img
                      src={
                        value.headPortrait &&
                        value.headPortrait instanceof Array &&
                        value.headPortrait[0].url
                          ? value.headPortrait[0].url
                          : ""
                      }
                      style={{
                        width: 60,
                        height: 80,
                        overflow: "hidden",
                        borderRadius: "50%"
                      }}
                    />
                    <div className={classes.middle}>
                      <span className={"name-sun"}>{value.name} {value.status ? <Tag small={true}>未派送</Tag> : <Tag small={true}>已派送</Tag>}</span>
                      <span>
                        <span>{value.price}</span>元/月
                      </span>
                      <span>
                        年龄:
                        {moment()
                          .add(1, "year")
                          .year() - moment(value.birthday).year()}
                        岁
                      </span>
                      <span>{value.address}</span>
                    </div>
                    <div>
                      <Button size={"small"}>
                        <Link to={{ pathname: `/detail/${value.id}` }} style={{color:"#9d9d9d"}}>
                          详情
                        </Link>
                      </Button>
                    </div>
                  </div>
                </Card.Body>
              </Card>
            </List.Item>
          );
        })}
      </List>
    </div>
  );
};

export default MiddleView;
